<!-- 
	name: 悬浮菜单
	version: v0.0.1
	update_time: 2020-6-25 
 -->
<template>
	<view>
		<!-- 遮罩 -->
		<view class="mask" v-if="show" @tap="show = false" @touchmove.stop.prevent></view>
		<!-- 按钮 -->
		<view class="major-box" :class="{show: show}" :style="{top: top + 'px' }" >
			<view v-if="flag1=='0'" class="click-btn" :style="bj" @tap="show = !show" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove">
				<view>高级</view>
				<view>设置</view>
			</view>
			<view v-if="flag1=='1'" class="click-btn" :style="bj" @tap="show = !show" draggable="true" @touchstart="touchstart" @touchmove.stop.prevent="touchmove">
				<view>报表</view>
				<view>管理</view>
			</view>
			<view class="nav-box">
				<view class="nav-btn" v-for="(btn, index) in btnList" :key="index" @tap="clickBtn(btn)">
					<view class="nav-icon" :style="{backgroundColor: btn.bgcolor}">{{btn.icon}}</view>
					<view class="nav-text">{{btn.text}}</view>
				</view>
			</view>
		</view>
	<popup ref="mapState" protocolPath='navigate/navigate'  policyPath='navigate/navigate'  @popupState="popupState"></popup>	
	</view>
</template>

<script>
import popup from '@/components/DuDu-popup/DuDu-popup.vue'
export default {
	components: {
		popup
	},
	props: {
	  //是否明文 默认密文
	 flag1: {
	    type: [String, Number],
	   default: ''
	 },
	 //是否明文 默认密文
	 sumcount: {
	    type: [String, Number],
	   default: ''
	 }
	},
	data() {
		return {
			 password: '',
			color:this.$kdup.color,
			 show: false ,// 是否显示
			top: 260,	// 顶端距离 
			deviationTop: 100,	// 偏移量
			windowHeight: uni.getSystemInfoSync().windowHeight,	// 视图高度 
			bj:{
				backgroundColor:this.$kdup.color
			},
			btnList: []
		};
	},
	mounted() {
		this.btnList=[];
		if(this.flag1=='0'){
			this.btnList.push(
			    {
					icon: '配',
					text: '条码配置',
					bgcolor: '#CAB493'
				},
				{
					icon: '临',
					text: '临时表',
					bgcolor: '#959AB3'
				},
				{
					icon: '反',
					text: '软件反馈',
					bgcolor: '#73B3C7'
				},
				{
					icon: '软',
					text: '关于软件',
					bgcolor: '#66B26A'
				})
		}else{
			this.btnList.push(
			    {
					icon: '员',
					text: '边检员日报表',
					bgcolor: '#00aaff'
				},
				{
					icon: '机',
					text: '机台日报表',
					bgcolor: '#55aa7f'
				},
				{
					icon: '班',
					text: '班组日报表',
					bgcolor: '#555500'
				},
				{
					icon: '时',
					text: '工时日报表',
					bgcolor: '#ffaaff'
				},
				{
					icon: '产',
					text: '生产工日报表',
					bgcolor: '#55007f'
				})
		}
	},
	methods: {
		// 点击按钮 
		clickBtn: function(btn) {
			if(btn.text=='关于软件'){
			 this.$refs.mapState.showPopup=true;
			}else if(btn.text=="软件反馈"){
				var msg = plus.messaging.createMessage(plus.messaging.TYPE_SMS);
					msg.to = ['15177590212', '13928208653'];
					msg.body = '请简述你的问题！';
					plus.messaging.sendMessage( msg );
			}else if(btn.text=="条码配置"){
				uni.navigateTo({
					 url:'/components/sa-hover-menu/KeyboardInput/KeyboardInput?id=1'
				})
			}else if(btn.text=="临时表"){
				uni.navigateTo({
					 url:'/components/sa-hover-menu/KeyboardInput/KeyboardInput?id=2'
				})
			}else if(btn.text=='边检员日报表'){
			uni.navigateTo({
				url:'/pages/DayView/DayView?name=ucharts1&sumcount='+this.sumcount
			}); 
			}else if(btn.text=="机台日报表"){
			uni.navigateTo({
				url:'/pages/DayView/DayView?name=ucharts2&sumcount='+this.sumcount
			}); 	
			}else if(btn.text=="班组日报表"){
			uni.navigateTo({	
				url:'/pages/DayView/DayView?name=echarts1&sumcount='+this.sumcount
			});	
			}else if(btn.text=="工时日报表"){
			uni.navigateTo({		
				url:'/pages/DayView/DayView?name=echarts2&sumcount='+this.sumcount
			});		
			}else if(btn.text=="生产工日报表"){
			uni.navigateTo({		
				url:'/pages/DayView/DayView?name=echarts3&sumcount='+this.sumcount
			});		
			}
		},
		// 拖动开始，记录一下偏移量
		touchstart: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			this.deviationTop = touch.clientY - this.top;
			// console.log(this.deviationTop);
		},
		// 上下拖动时 
		touchmove: function(e) {
			var touch = e.touches[0] || e.changedTouches[0];
			var top = touch.clientY;
			top = top - this.deviationTop;
			if (top < 0) {
				top = 0;
			}
			if (top > this.windowHeight - 40) {
				top = this.windowHeight - 40;
			}
			this.top = top;
			return false;
		},
	     popupState: function(e){ //e->false取消 true确认
		 
	    }
	}
};
</script>

<style>
	/* 遮罩 */
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 999;
		background: rgba(0, 0, 0, 0.4);
	}
	/* 总盒子 */
	.major-box {
		border: 1px 0 solid;
		z-index: 999;
		position: fixed;
		width: 100%;
		/* height: 0px; */
		left: 650rpx;
		transition: left 0.5s;
		overflow: hidden;
	}
	/* 展开时 */
	.major-box.show{left: 110rpx;}
	
	.click-btn,
	.nav-box {
		float: left;
	}
	/* 按钮样式 */
	.nav-box{
		background-color: #FFF;
		border-radius: 0 0 0 5px;
	}
	.click-btn {
		width: 100rpx;
		color: #fff;
		font-size: 10px;
		text-align: center;
		border-radius: 100rpx 0 0 100rpx;
		line-height: 12px;
		padding: 5px 0;
	}
	.click-btn view {
		padding-left: 15rpx;
	}

	/* 按钮盒子 */
	.nav-box {
		width: 500rpx;
		padding: 30rpx 20rpx 20rpx 20rpx;
		display: flex;
		flex-wrap: wrap;
		text-align: center;
		justify-content: center;
	}
	.nav-btn {
		flex: 1;
		border: 0px #000 solid;
		min-width: 150rpx;
		padding: 12rpx 0;
		padding-bottom: 20rpx;
	}
	.nav-icon {
		width: 80rpx;
		height: 80rpx;
		line-height: 80rpx;
		display: inline-block;
		font-size: 15px;
		border-radius: 50%;
		background-color: #666;
		color: #fff;
	}
	.nav-text {
		font-size: 12px;
		font-weight: bold;
		margin-top: 8rpx;
	}
</style>
